<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('布置实验')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: summernote-css"/>
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
<div class="container">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <br>
    <br>
    <form class="form-horizontal m" id="form-experiment-edit" th:object="${onlineExperiment}">
        <input name="onlineExperimentId" th:field="*{onlineExperimentId}" type="hidden" id="onlineExperimentId">
        <div class="form-group">
            <label class="col-sm-3 control-label">实验名称：</label>
            <div class="col-sm-8">
                <input name="onlineExperimentName" id="onlineExperimentName" th:field="*{onlineExperimentName}"
                       class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">开始时间：</label>
            <div class="col-sm-8">
                <input id="experimentTeaBeginTime" name="experimentTeaBeginTime"
                       class="form-control" type="text" placeholder="开始时间" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">结束时间：</label>
            <div class="col-sm-8">
                <input id="experimentTeaEndTime" name="experimentTeaEndTime"
                       class="form-control" type="text" placeholder="结束时间" required>
            </div>
        </div>
        <br>
        <div class="form-group" style="text-align: center">
            <div class="col-sm-3"></div>
            <label class="col-sm-8" style="font-size: 18px">可以选择专业,班级,和自行导入学生(任选其一)</label>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">专业选择：</label>
            <div class="col-sm-8">
                <select name="profession" id="profession" class="form-control" th:with="dicts=${@dict.getType('sys_profession')}">
                    <option value="">请选择</option>
                    <option th:each="dict:${dicts}" th:value="${dict.dictValue}" th:text="${dict.dictLabel}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">班级选择：</label>
            <div class="col-sm-8">
                <select name="classRoom" id="classRoom" class="form-control">
                    <option value="">请选择</option>
                    <option th:each="dept : ${depts}" th:value="${dept.deptId}" th:text="${dept.deptName}"></option>
                </select>
            </div>
        </div>
        <br>
        <div class="form-group">
            <label class="col-sm-3 control-label">导入学生：</label>
            <div class="col-sm-4">
                <button class="btn btn-primary form-control" type="button" onclick="downloadFiles()">下载模板</button>
            </div>
            <div class="col-sm-4">
                <button class="btn btn-primary  form-control" type="button" onclick="uploadFiles()">上传文件</button>
            </div>
        </div>
        <div class="form-group" id="studentTable" hidden="true">
            <label class="col-sm-3 control-label">上传学生名单：</label>
            <div class="col-sm-8">
                <input id="file" name="file" type="file" class="file-loading"/>
            </div>
        </div>
        <br>
        <br>
        <div class="form-group">
            <div class="col-sm-5"></div>
            <div class="col-sm-2">
                <option type="option" class="btn btn-warning" style="width: 120px;" onclick="insertAssign()">确定</option>
            </div>
            <div class="col-sm-5"></div>
        </div>
    </form>
</div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: summernote-js"/>
<th:block th:include="include :: datetimepicker-js" />
</body>
<script>
    var prefix=ctx+'/system/OnlineExperimentStu';
    $("#experimentTeaBeginTime").datetimepicker({
        format: 'yyyy-mm-dd',
        minView: 2,
        autoclose: true, //选择后自动关闭
        todayBtn: true,  //显示今天按钮
    })
    $("#experimentTeaEndTime").datetimepicker({
        format: 'yyyy-mm-dd',
        minView: 2,
        autoclose: true, //选择后自动关闭
        todayBtn: true,  //显示今天按钮
    })
    //点击上传
    function uploadFiles() {
        //console.log($("#studentTable").attr("hidden"));
        if($("#studentTable").attr("hidden")=="hidden"){
            $("#studentTable").attr("hidden",false);
        }else{
            $("#studentTable").attr("hidden",true);
        }
    }
    //下载模板
    function downloadFiles(){
        $.get(prefix+'/importTemplate', function(result) {
            if (result.code == web_status.SUCCESS) {
                window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
            } else if (result.code == web_status.WARNING) {
                $.modal.alertWarning(result.msg)
            } else {
                $.modal.alertError(result.msg);
            }
        });
    }


    $(function () {
        //格式化文件上传
        $('#file').fileinput({
            allowedFileExtensions: ['xls', 'xlsx'],//接收的文件后缀,
            enctype: 'multipart/form-data',
            showBrowse: true,
            showUpload: false, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-success", //按钮样式
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            dropZoneTitle: "上传学生文档，先点击下载模板",
            //msgFilesTooMany: "选择上传的文件数量({2}) 超过允许的最大数值{2}！",
        });
    })


    $("#form-experiment-add").validate({
        focusCleanup: true
    });

    /*对学生所在实验*/
    function insertAssign() {
        if ($.validate.form()) {
            if($("#experimentTeaBeginTime").val()>=$("#experimentTeaEndTime").val()){
                $.modal.alertError("请选择结束时间大于开始时间")
            }else{
                $.modal.loading("正在布置实验，请稍后...");
                var profession=$("#profession").val();
                var classRoom=$("#classRoom").val();
                var file=$("#file")[0].files[0];
                if((profession!='' && classRoom!='')||(classRoom!=''&&file!=undefined)||(profession!=''&&file!=undefined)){
                    $.modal.alertError("为避免重复，请尽量选择一个提交学生的方式");
                }else if((profession=='' || profession==undefined) && (file=='' || file==undefined) && (classRoom=='' || classRoom==undefined)){
                    $.modal.alertError("请选择一个提交学生的方式");
                } else {
                    var formData=new FormData();
                    formData.append("onlineExperimentId",$("#onlineExperimentId").val()),
                        formData.append("experimentTeaName",$("#onlineExperimentName").val()),
                        formData.append("experimentTeaBeginTime",$("#experimentTeaBeginTime").val()),
                        formData.append("experimentTeaEndTime",$("#experimentTeaEndTime").val()),
                        formData.append("file",file),
                        formData.append("deptId",classRoom),
                        formData.append("profession",profession),
                        //formData.append("deptId",classRoom),
                        //formData.append("profession",profession),
                        $.ajax({
                            url : prefix+'/importData',
                            type: 'post',
                            data: formData,
                            contentType: false,
                            processData: false,
                            success:function (data) {
                                /*$.modal.msgReload(data.msg)*/
                                /*$.modal.alert(data.msg);
                                setInterval(function () {
                                    $.modal.reload();
                                },1000)*/
                                if(data.code==0){
                                    $.modal.msgReload("布置成功",'success')
                                }
                                if(data.code==500){
                                    $.modal.msgReload("布置失败",'error')
                                }
                            }
                        })
                }
            }
        }
    }
</script>
</html>